<template>
  <el-drawer
    :visible.sync="drawer"
    direction="rtl"
    size="70%"
    :with-header="false"
    :width="700"
  >
    <div class="drawer_box">
      <div class="drawer_t">
        <div class="drawer_t_l">
          <img
            class="drawer_t_l_img"
            src="/static/skin/herodoo/main/platform/home/img/piliangoumai.png"
            alt=""
          />
          添加权益
        </div>
        <img
          class="drawer_t_r"
          src="/static/skin/herodoo/main/platform/home/img/guanbi.png"
          alt=""
          @click="drawer = false"
        />
      </div>
      <div class="drawer_c">
        <el-table
          ref="multipleTable"
          :data="rightList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          :cell-class-name="tableRowStyle"
          :reserve-selection="true"
          :row-key="getRowKeys"
          height="670"
        >
          <el-table-column
            type="selection"
            min-width="3%"
            :selectable="selectable"
          >
          </el-table-column>
          <el-table-column label="权益名称" min-width="30%">
            <template slot-scope="scope">
              <div class="scope_name">
                <img
                  class="table_img"
                  :src="getUrl(scope.row.MainPicturePath)"
                  alt=""
                />
                <span>{{ scope.row.Name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="权益标签" min-width="20%">
            <template slot-scope="scope">
              <div class="scope_label">
                <span
                  v-for="(item, index) in getTag(scope.row.EquityFlagListName)"
                  :key="index"
                  >{{ item }}</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="单价" min-width="15%">
            <template slot-scope="scope">
              <div class="scope_price">￥{{ scope.row.CostPrice }}</div>
            </template>
          </el-table-column>
          <el-table-column label="库存" min-width="10%">
            <template slot-scope="scope">
              <div class="scope_price">
                {{ scope.row.InventoryQuantity }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="起售数量" min-width="10%">
            <template slot-scope="scope">
              <div class="scope_price">
                {{ scope.row.MinimumQuantity }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="金额" min-width="15%">
            <template slot-scope="scope">
              <div class="scope_sum">
                ￥{{ (scope.row.CostPrice * scope.row.num).toFixed(2) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="数量" min-width="25%">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.num"
                @change="handleChange"
                size="mini"
                :min="scope.row.MinimumQuantity"
                :max="scope.row.InventoryQuantity"
                label="描述文字"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="drawer_b">
        <div class="drawer_b_r"></div>
        <div class="drawer_b_r">
          <div class="drawer_list">
            已选择权益: <span>{{ allTotal }}</span
            >件
          </div>
          <div class="drawer_list">
            合计: <span>￥{{ totalMoney }}</span>
          </div>
          <span class="drawer_sx" @click="addToFather()">
            确认
          </span>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: "bulkBuying",
  props: {},
  watch: {},
  data() {
    return {
      octopus: this.$parent.octopus,
      drawer: false,
      selectAll: false,
      multipleSelection: [],
      rightList: [],
      type: "",
      fatherList: []
    };
  },
  mounted() {},
  computed: {
    totalMoney() {
      let price = this.multipleSelection.reduce((total, item) => {
        const combinedPrice = item.CostPrice * item.num * 10000;
        return total + combinedPrice;
      }, 0);
      return (price / 10000).toFixed(2);
    },
    allTotal() {
      let num = 0;
      this.multipleSelection.map(v => {
        num += v.num;
      });
      return num;
    }
  },
  methods: {
    getRowKeys(row) {
      return row.key;
    },
    getUrl(url) {
      let str = JSON.parse(url);
      return str[0].url;
    },
    getTag(str) {
      let arr = str.split(",");
      return arr;
    },
    //禁用时样式状态
    tableRowStyle({ row, column, rowIndex, columnIndex }) {
      if (
        row.CompanyID != this.octopus.passport.authorization.company &&
        columnIndex == 0
      ) {
        return "forbidChoice";
      }
    },
    //判断禁用
    selectable(row, index) {
      // if (row.CompanyID != this.octopus.passport.authorization.company) {
      //   return false;
      // } else {
        return true;
      // }
    },
    // 根据父页面确定勾选状态
    changeTableStatus(e) {
      let that = this;
      that.$nextTick(() => {
        this.$refs.multipleTable.toggleRowSelection(
          that.rightList[
            this.rightList.findIndex(item => {
              return item.ID == e;
            })
          ],
          false
        );
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose() {
      this.drawer = false;
    },
    drawerOp(type, id, list, status) {
      this.fatherList = list;
      this.fatherList.map(v => (v.checked = true));
      let o = this;
      this.drawer = true;
      this.type = type;
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: id,
          cellData: [
            { name: "CompanyID" }, // 权益所属公司
            { name: "CostPrice" }, // 平台价格
            { name: "CreateTime" }, // 权益创建时间
            { name: "EffectiveTime" }, // 生效时间
            { name: "EquityFlagList" }, // 权益标签
            { name: "EquityFlagListName" }, // 权益标签中文
            { name: "ExpireTime" }, // 过期时间
            { name: "ID" }, // 权益ID
            { name: "MinimumQuantity" }, // 起售数量
            { name: "InventoryQuantity",filterKey:'>=',filterValue:1 }, // 库存数量
            { name: "MainPicturePath" }, // 主图
            { name: "Name" }, // 权益名称
            { name: "ProductFlagList" }, // 产品标签
            { name: "ProductFlagListName" }, // 产品标签 中文
            { name: "SalePrice" }, // 市场价格
            { name: "SecondaryPicturePath" }, // 副图
            { name: "SoldQuantity" }, // 已售数量
            { name: "Status" }, // 权益状态
            { name: "TransferRuleID" }, // 采购公司限制
            { name: "TransferRuleIDName" }, // 采购公司限制中文
            { name: "TypeID",filterKey: "=", filterValue: 1 }, // 权益类型
            { name: "TypeIDName" }, // 权益类型 （中文）
            { name: "AddCount" }, // AddCount
            { name: "Integral" }, // 让利积分
            { name: "PlatformServiceRate" }, // 平台服务费
            { name: "EquityServiceRate" }, // 小程序服务费
            { name: "UsersCount" }, // 使用人数
            { name: "EquityList" }, // 权益列表
            { name: "ProductID" }, // 产品ID
            { name: "EquityCount" } // EquityCount
          ],
          paramData: {
            CompanyID: this.octopus.passport.authorization.company,
            IsInventory: true
          }
        },
        data => {
          if (data.status.code == 200) {
            // o.rightList = data.content.queryData.sort(
            //   (a, b) => a.CompanyID - b.CompanyID
            // );
            data.content.queryData.map(v=>{
              v.num = v.MinimumQuantity
            })

            o.rightList = data.content.queryData
            
            status == "CREATE" && this.changeStatusCreate();
            status == "UPDATE" && this.changeStatus();
          } else {
            o.octopus.tips.error(data);
          }
        }
      );
    },
    changeStatusCreate() {
      this.$nextTick(() => {
        this.fatherList.map(v => {
          this.rightList.map(x => {
            if (x.ID == v.ID) {
              x.num = v.num;
            }
          });
          let index = this.rightList.findIndex(x => {
            return x.ID == v.ID;
          });

          if (index > -1) {
            this.$refs.multipleTable &&
              this.$refs.multipleTable.toggleRowSelection(
                this.rightList[index],
                true
              );
          }
        });
      });
    },
    changeStatus() {
      this.$nextTick(() => {
        this.fatherList.map(v => {
          this.rightList.map(x => {
            if (x.ID == v.MainEquityID) {
              x.num = v.num;
              x.MainEquityID = v.MainEquityID;
            }
          });
          let index = this.rightList.findIndex(x => {
            return x.ID == v.MainEquityID;
          });

          if (index > -1) {
            this.$refs.multipleTable &&
              this.$refs.multipleTable.toggleRowSelection(
                this.rightList[index],
                true
              );
          }
        });
      });
    },
    addToFather() {
      let arr = [],
        arr2 = [];
      this.multipleSelection.map(v => {
        v.checked = true;
        arr.push(v.InventoryQuantity / v.num);
        arr2.push(v.MinimumQuantity);
      });
      let maxNum = Math.floor(Math.min(...arr));
      let minNum = Math.floor(Math.max(...arr2));
      
      if (maxNum > 0) {
        this.drawer = false;
        this.$emit(
          "ownRightList",
          this.multipleSelection,
          maxNum,
          this.type,
          minNum
        );
        return;
      }

      this.$message({
        type: "error",
        message: "您选择的权益最小起购数量和最大库存有冲突！"
      });
      return;
    }
  }
};
</script>
<style scoped>
>>> .el-table th > .cell {
  font-weight: bold;
}

>>> .el-table__row {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 设置阴影效果 */
}

>>> .el-table::before {
  display: none;
}

>>> .el-table .el-table__body {
  -webkit-border-vertical-spacing: 0.8rem;
}

>>> .el-table thead th {
  font-size: 1.6rem;
  color: #575757;
}

>>> .el-table thead th:nth-last-child(2) {
  border-radius: 0 0.5rem 0.5rem 0;
  /* right: 1rem; */
}

>>> .el-table thead th,
>>> .el-table .el-table__row td {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  padding: 1.1rem 0;
}

>>> .el-table thead th:first-child,
>>> .el-table .el-table__row td:first-child {
  border-left: 1px solid #efefef;
  border-radius: 5px 0 0 5px;
}

>>> .el-table .el-table__row > td {
  font-size: 1.4rem;
  color: #333333;
}

>>> .el-table .el-table__row > td:last-child {
  border-radius: 0 5px 5px 0;
  right: 1px;
}

>>> .el-table .el-table__body tr:hover > td.el-table__cell {
  background-color: rgba(0, 110, 255, 0.05);
}

>>> .el-table .el-table__fixed::before {
  display: none;
}

>>> .el-table thead {
  color: #1b1917 !important;
  font-size: 1.8rem;
}

>>> .has-gutter tr {
  background: linear-gradient(to right, #fefefe, #fbf9f7) !important;
  /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
}

>>> .el-table thead th {
  background-color: transparent;
}

>>> .el-table thead th {
  background-color: transparent;
}

>>> .el-input--mini {
  height: 3.5rem;
  line-height: 3.2rem;
}

>>> .el-input-number--mini .el-input-number__decrease {
  width: 3.2rem;
  font-size: 1.8rem;
}

>>> .el-input-number--mini .el-input-number__increase {
  width: 3.2rem;
  font-size: 1.8rem;
}

>>> .el-input-number--mini {
  line-height: 3.2rem;
}

>>> .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #f78c51;
  border-color: #f78c51;
}

>>> .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #f78c51;
  border-color: #f78c51;
}

>>> .el-message-box--center {
  padding-bottom: 0px;
}

.scope_label {
  display: flex;
  flex-wrap: wrap;
}

.scope_name {
  font-size: 1.6rem;
  display: flex;
}
.scope_name span {
  flex: 1;
}
.scope_label span {
  color: #a1a1a1;
  border: 1px solid #d9d9d9;
  padding: 0px 0.5rem;
  font-size: 1.3rem;
  margin: 0.3rem;
  border-radius: 0.5rem;
}

.table_img {
  width: 7rem;
  height: 7rem;
  border-radius: 1rem;
  margin-right: 1rem;
}

.scope_sum {
  font-size: 2rem;
  font-weight: bold;
  color: #f19065;
}

.scope_price {
  font-size: 2rem;
  font-weight: bold;
  color: #191916;
}

.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.drawer_c {
  height: 80vh;
  overflow: auto;
  margin-top: 3rem;
  padding: 0 3rem;
  background-color: #fdfdfd;
}

.drawer_b {
  height: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 1rem;
  width: 100%;
  padding: 0 5rem;
  box-sizing: border-box;
}

.drawer_b_r {
  display: flex;
  align-items: center;
}

.drawer_list {
  margin: 0 1rem;
  font-size: 1.6rem;
}

.drawer_list span {
  color: #f78c51;
  font-weight: bold;
  font-size: 2rem;
  margin: 0 1.3rem;
}

.drawer_sx {
  padding: 1.3rem 5rem;
  background-color: #f78c51;
  color: #fff;
  font-size: 1.6rem;
  border-radius: 1rem;
  margin-left: 1.3rem;
  cursor: pointer;
}
</style>
<style scoped>
.forbidChoice {
  background-color: #f3f4f4;
}
</style>
